/**
 * 添加调查问卷
 * 
 * 添加调查问卷采用问一答一的方式顺序添加问题
 * 进入页面首先填写本次要调查的主题：例如 2024年双十一个人消费情况调查
 * 点击页面的添加问题，进入到下一个填写环节，例如添加单选题：你今年计划的计划消费额度是多少？然后添加选项
 * 点击下一题可以添加下一个问题，问题一共分为三种类型，单选、多选、填空（目前为止三种即可）
 * 
 * 页面的要素分两个阶段：
 * 第一阶段：填写主题：该阶段下有一个按钮：完成标题，开始创建问题
 * 第二阶段：填写问题：该阶段下有三个按钮：上一题、下一题、完成问卷题目编写
 * 第二阶段有如下要素：
 *   题目输入框：用来输入题目名称
 *   题目类型单选：选择题目类型 一共有三种类型
 *     对于单选类型的题目和多选类型的题目，可以按需添加选项，选项有两个要素，选项名称和选项值
 *     对于填空类型的题目来说，不需要添加选项。
 * 
 * 上述阶段图示如下：
 * 
 * 第一阶段：
 * 
 *  请输入问卷主题：____
 *  [完成标题 开始创建问题]、或者 [下一步]
 * 
 * 第二阶段（未选择题目类型）：
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [多选] [填空]
 * 
 *   [上一步]
 *  
 * 第二阶段（选择单选）
 *   请输入题目名称：____
 *   请选择题目类型：[√单选] [多选] [填空]
 *   请输入选项一的名称和选项一的值：____, ____
 *   [增加选项]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 第二阶段（选择多选）
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [√多选] [填空]
 *   请输入选项一的名称和选项一的值：____, ____
 *   [增加选项]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 第二阶段（选择单选）
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [多选] [√填空]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 可以优化的内容：
 *   1. 在创建新的题目后选择题目类型为单选或多选，默认添加一个选项 (checkbox没有选中)
 *   2. 生成重复的空的选项时应该做出提示 请完善已有的选项
 *   3. 生成重复的值的选项时应该做出提示 不能添加值相同的选项
 *   4. 提交时应该调用接口（现在的 questionnaire 并不完整，因为 questionList 的数据没有合并）
 *   5. 切换单选、多选的时候可以保留选项
 * 
 * 明天的任务：看懂这个页面，并为关键语句添加注释，优化内容能写就写，其他可以优化的地方也可以按照自己的需求优化
 */
import { ApiRequest, apis } from '@/service'
import { useEffect, useState } from 'react'
import { Input, Button, RadioGroup, Radio, MessagePlugin } from 'tdesign-react'

const {
  practiceService: {
    insertQuestionnaire
  }
} = apis

type QuestionTypeType = 'radio' | 'checkbox' | 'input' | ''

//选项类型
type OptionType = {
  label: string,
  value: string,
}

//题目类型（单选和多选存在一起 用type管理）e:这里应该重新命名啊
type QuestionType = {
  title: string,
  type: QuestionTypeType,
  optionList: OptionType[], 
}

//问卷类型
type QuestionnaireType = {
  title: string,
  questionList: QuestionType[],
  submitNumber: number,
}

const CreateQuestionnaires = () => {

  const [title, setTitle] = useState('')
  const [questionList, setQuestionList] = useState<QuestionType[]>([])
  // 设置题目的下标
  const [questionFlag, setQuestionFlag] = useState(-1)

  const questionType = [
    {
      label: '单选',
      value: 'radio',
    },
    {
      label: '多选',
      value: 'checkbox',
    },
    {
      label: '填空',
      value: 'input',
    },
  ]

  const _initQuestion: QuestionType = {
    title: '',
    type: '',
    optionList: [],
  }

  const onQuestionnaireTitleChange = (event: string) => {
    setTitle(event)
  }

  const onQuestionPrevButtonClick = () => {
    setQuestionFlag(questionFlag - 1)
  }

  //添加下一个题目/下一步
  const addNextQuestion = () => {
    let _questionFlag = questionFlag + 1
    setQuestionFlag(_questionFlag)
    if (!questionList[_questionFlag]) {
      // 如果游标所在的位置不存在数据，就添加一个问题（每个问题必须填完之后才能填写下个问题）
      let _questionList = [...questionList]
      _questionList.push(_initQuestion)
      setQuestionList(_questionList)
    } else {
      // 如果游标所指位置已经存在数据了，那么
    }
  }

  const onQuestionTitleChange = (event: string) => {
    let _questionList = [...questionList]
    _questionList[questionFlag].title = event
    setQuestionList(_questionList)
    console.log('_questionList', _questionList)
  }

  // 选择题目类型
  const onQuestionTypeChange = (event: any) => {
    let _questionList = [...questionList]
    if (!_questionList[questionFlag].type) {
      _questionList[questionFlag].optionList.push({ label: '', value: '' })
    }
    _questionList[questionFlag].type = event
    setQuestionList(_questionList)
  }

  //添加选项 (1.是否有空选项，2.是否有重复的值)
  const addOptionItem = () => {
    let _questionList = [...questionList]
    let _optionList = [..._questionList[questionFlag].optionList]
    // for (let i = 0; i < _optionList.length; i++) { // e:这个循环有点离谱啊, 只需要循环一次，因为这只用来判断当前添加是否生效，参考这一段后面的写法
    //   if (_optionList[i].label == '') {
    //     MessagePlugin.warning('请完善已有的选项')
    //     return
    //   }
    //   // for (let j = i + 1; j < _optionList.length; j++) {
    //   //   if (_optionList[i].label == _optionList[j].label) {
    //   //     MessagePlugin.warning('选项不能重复')
    //   //     return
    //   //   }
    //   // }
    // }
    /**
     * 这里一共做了两件事，一件事是把没有填写value值的补充完整，另一件事是检查label、value是否合法（也就是label是否为空和value是否重复）
     */
    let _optionsList = [...questionList[questionFlag].optionList] // 这里的radioList 应该修改为 optionList
    /** 只需要判断label有没有空的，value有没有重复的，其中空value我们还要给他补全 */
    let _labelList: string[] = [], _valueList: string[] = []
    _optionsList.forEach((item: OptionType, index: number) => {
      _labelList.push(item.label)
      _valueList.push(item.value || item.label)
      _optionList[index].value = _optionList[index].value || _optionList[index].label
    })
    let labelHasEmpty = false, valueHasDuplicate = false
    // 拿到数据之后再遍历一下label 有没有空的，同时也可以判断一下 value 有没有重复的
    for (let index = 0; index < _labelList.length; index++) {
      if (!_labelList[index]) {
        labelHasEmpty = true
        break // return 不合法 // 如果这里不判断 value 是否重复，就需要break终止循环
      }
      // if (_valueList.indexOf(_valueList[index])  != index) {
      //   valueHasDuplicate = true
      // }
    }
    // 拿到数据之后再遍历一下 value 有没有重复的
    // 两种实用方法 一种是 Set 对象
    if (_valueList.length !== (new Set(_valueList)).size) {
      valueHasDuplicate = true
    }
    // // 另一种是 reduce 方法
    // let _countByIndexValueList = _valueList.reduce((acc: any, item: string) => {
    //   acc[item] = (acc[item] || 0) + 1
    //   return acc
    // })
    // if (Object.values(_countByIndexValueList).some(count => count + 1)) {
    //   valueHasDuplicate = true
    // }
    // // 也可以用 indexOf 方法
    // for (let index = 0; index < _valueList.length; index ++) {
    //   if (_valueList.indexOf(_valueList[index])  != index) {
    //     valueHasDuplicate = true
    //   }
    // }
    if (!labelHasEmpty && !valueHasDuplicate) {
      _optionList.push({ label: '', value: '' })
    }
    _questionList[questionFlag].optionList = _optionList
    setQuestionList(_questionList)
    if (labelHasEmpty) {
      MessagePlugin.error('你还没填写完成所有的选项')
      return
    }
    if (valueHasDuplicate) {
      MessagePlugin.error('选项值有重复的，请检查')
      return
    }
  }

  const onOptionChange = (event: string, index: number, optionKey: 'label' | 'value') => {
    let _questionList = [...questionList]
    let _optionsList = [..._questionList[questionFlag].optionList]
    _optionsList[index][optionKey] = event
    _questionList[questionFlag].optionList = _optionsList
    setQuestionList(_questionList)
  }

  const submitQuestionnaire = () => {
    const params: QuestionnaireType = {
      title: title,
      questionList: questionList,
      submitNumber: 0
    }
    ApiRequest({ api: insertQuestionnaire, params }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        MessagePlugin.success(note, 2000)
      }
    })
  }

  const isFullQuestion = (question: QuestionType) => {
    if (!question.title || !question.type) {
      return false
    }
    if (question.type == 'radio' && question.optionList?.length == 0) {
      return false
    }
    return true
  }
  
  /**
   * 渲染第一阶段
   */
  const renderStage1 = () => {
    return <div className='create-questionnaire-title'>
      <Input
        className='input-questionnaire-title'
        label='问卷主题'
        placeholder='请输入问卷主题'
        defaultValue={title}
        onChange={onQuestionnaireTitleChange}
        key={'stage1'}
      />
      <Button
        className='add-next-question'
        onClick={() => { addNextQuestion() }}
      >下一步</Button>
    </div>
  }

  /**
   * 渲染第二阶段
   */
  const renderStage2 = () => {
    return <div className='create-single-question'>
      <Input
        className='input-question-title'
        label='请输入题目名称'
        placeholder='请输入题目名称'
        key={`${questionFlag}-question-title`}
        defaultValue={questionList[questionFlag].title}
        onChange={onQuestionTitleChange}
      />
      <div className='question-type-select'>
        <span className='question-type-label'>请选择题目类型</span>
        <RadioGroup onChange={onQuestionTypeChange} key={`${questionFlag}-question-type`} defaultValue={questionList[questionFlag].type}>
          {questionType.map((item: any) => {
            return <Radio value={item.value} key={item.value}>{item.label}</Radio>
          })}
        </RadioGroup>
      </div>
      {/* {(questionList[questionFlag].type == 'radio' || questionList[questionFlag].type == 'checkbox') && <div className='add-select-options'>
          我要添加选项
      </div>} */}
      {/* 通过questionList[questionFlag].radioList来判断题目选项 */}
      { (questionList[questionFlag].type == 'radio' || questionList[questionFlag].type == 'checkbox') && <div className='add-select-options' key={`${questionFlag}-question-options`}>
          {questionList[questionFlag].optionList.map((item: any, index: number) => {
            return <div className='radio-option' key={index}>
              <span className='radio-option-title'>选项{index + 1}</span>
              <Input
                className='radio-option-label'
                placeholder='请输入要显示的选项名称'
                key={`${questionList[questionFlag].type}-${index}-option-label`}
                value={item.label}
                onChange={(event) => { onOptionChange(event, index, 'label') }}
              />
              <Input
                className='radio-option-value'
                placeholder='请输入选项对应的值（留空表示与名称一致）'
                key={`${questionList[questionFlag].type}-${index}-option-value`}
                value={item.value}
                onChange={(event) => { onOptionChange(event, index, 'value') }}
              />
            </div>
          })}
          <Button onClick={addOptionItem}>{questionList[questionFlag].type == 'radio'?'添加单选选项':'添加多选选项'}</Button>
      </div>}
      <Button
        className='back-button'
        onClick={onQuestionPrevButtonClick}
      >上一步</Button>
      {isFullQuestion(questionList[questionFlag]) && <Button
        className='next-button'
        onClick={() => { addNextQuestion() }}
      >下一步</Button>}
      <Button
        className='submit-questionnaire'
        onClick={submitQuestionnaire}
      >完成</Button>
    </div>
  }

  return <div className='create-questionnaires'>
    {questionFlag == -1 ? renderStage1() : renderStage2()}
  </div>
}

export default CreateQuestionnaires
